import { Button, Popconfirm, Table, Form, message, Modal, Input } from 'antd'
import React, { useEffect, useState } from 'react'
import { useStore } from "../../store"
import { observer } from 'mobx-react-lite'
import { http } from '../../utils'
//
const SubjectCreateForm = ({ open, onCreate, onCancel }) => {
  const [form] = Form.useForm()
  const onOk = () => {
    form
      .validateFields()
      .then((values) => {
        form.resetFields()
        onCreate(values)
      })
      .catch((info) => {
        console.log('Validate Failed:', info)
      })
  }

  return (
    <Modal
      open={open}
      title="创建新学科"
      okText="Create"
      cancelText="Cancel"
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
      >
        <Form.Item name='course_name' label='学科名'>
          <Input type="textarea" />
        </Form.Item>
        <Form.Item name="description" label="学科说明">
          <Input type="textarea" />
        </Form.Item>
      </Form>
    </Modal>
  )
}

const onChange = (pagination, filters, sorter, extra) => {
  console.log('params', pagination, filters, sorter, extra)
}
//
function Subject () {

  //弹出框
  const [open, setOpen] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const onCreate = async (values) => { //创建课程操作
    console.log('Received values of form: ', values)
    try {
      await http.post(`/base_server/api/v1/pub/subject/add`, {
        course_name: values.course_name,
        description: values.description,
      })
        .then(() => {
          message.success('添加成功')
          setConfirmLoading(true)
          setTimeout(() => {
            setOpen(false)
            setConfirmLoading(false)

          }, 2000)
        })
    } catch (e) {
      message.error(e.response?.data?.message || '添加失败')
    }
  }

  const [subject, setSubject] = useState([{
    id: 1,
    description: null,
    course_name: null,
    create_time: null,
    last_update_time: null
  }
  ])
  const { subjectStore } = useStore()
  useEffect(() => {
    subjectStore.getSubjectList()
    setSubject(subjectStore.subjectList)

  }, [subjectStore])// eslint-disable-line

  const handleDelete = async (id) => {
    await http.delete(`/base_server/api/v1/pub/subject/delete${'?id='}${id}`)
      .then(() => {

      })
  }
  const columns = [
    {

      title: '学科序号',
      dataIndex: 'id',
      width: '10%',
      // sorter: (a, b) => a.age - b.age,
    },
    {

      title: '学科名',
      dataIndex: 'course_name',
      width: '20%',
    },
    {

      title: '学科说明',
      dataIndex: 'description',
      width: '20%',
      // sorter: (a, b) => a.age - b.age,
    },
    {

      title: '创建时间',
      dataIndex: 'create_time',

      width: '20%',
    },
    {

      title: '更新时间',
      dataIndex: 'last_update_time',
      width: '20%',
    },
    {
      title: 'operation',
      dataIndex: 'operation',
      render: (_, record) =>
        subject.length >= 1 ? (
          <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.id)}>
            <Button>Delete</Button>
          </Popconfirm>
        ) : null,
    },
  ]
  //
  return (

    <div className='subject-sty'>
      <Button
        type="primary"
        onClick={() => {
          setOpen(true)
        }}
      >
        增加学科
      </Button>
      <SubjectCreateForm
        open={open}
        onCreate={onCreate}
        confirmLoading={confirmLoading}
        onCancel={() => {
          setOpen(false)
        }}
      />
      <Table columns={columns}
        dataSource={subject}
        onChange={onChange}
        rowKey={(subject) => subject.id} />
    </div>
  )
};
export default observer(Subject) 